<template>
    <div>
        <el-card>

            <el-row style="padding-top: 15px;">
                <el-row>
                    <el-col :span="3">
                        <span style="font-size: larger; color: rgb(64, 161, 246);">总业绩</span>
                    </el-col>
                </el-row>
                <el-row style="padding-top: 20px;">
                    <el-card>
                        <el-col :span="10" :offset="1">

                            <el-row>
                                <span style="font-weight: bold; font-size: smaller; margin-right: 50%;"></span>
                            </el-row>
                            <div id="myChart1" style="width: 300px;height: 250px; margin-right: 10%;"></div>

                        </el-col>
                        <el-col :span="10" :offset="1">

                            <el-row>
                                <span style="font-weight: bold; font-size: smaller; margin-right: 60%;"></span>
                            </el-row>
                            <div id="myChart" style="width: 500px;height: 250px;"></div>

                        </el-col>
                    </el-card>
                </el-row>
            </el-row>
            <el-row style="padding-top: 15px;">
                <el-row>
                    <el-col :span="3">
                        <span style="font-size: larger; color: rgb(64, 161, 246);">课程业绩</span>
                    </el-col>
                </el-row>
                <el-row style="padding-top: 20px;">
                    <el-card>
                        <el-col :span="10" :offset="1">

                            <el-row>
                                <span style="font-weight: bold; font-size: smaller; margin-right: 50%;"></span>
                            </el-row>
                            <div id="soursepie" style="width: 300px;height: 250px; margin-right: 10%;"></div>

                        </el-col>
                        <el-col :span="10" :offset="1">

                            <el-row>
                                <span style="font-weight: bold; font-size: smaller; margin-right: 60%;"></span>
                            </el-row>
                            <div id="soursecolumnar" style="width: 500px;height: 250px;"></div>

                        </el-col>
                    </el-card>
                </el-row>
            </el-row>

            <el-row style="padding-top: 15px;">
                <el-row>
                    <el-col :span="3">
                        <span style="font-size: larger; color: rgb(64, 161, 246);">课程业绩</span>
                    </el-col>
                </el-row>
                <el-row style="padding-top: 20px;">
                    <el-card>
                        <el-col :span="10" :offset="1">

                            <el-row>
                                <span style="font-weight: bold; font-size: smaller; margin-right: 50%;"></span>
                            </el-row>
                            <div id="accountpie" style="width: 550px;height: 250px; margin-right: 10%;"></div>

                        </el-col>
                        <el-col :span="10" :offset="1">

                            <el-row>
                                <span style="font-weight: bold; font-size: smaller; margin-right: 60%;"></span>
                            </el-row>
                            <div id="accountcolumnar" style="width: 500px;height: 250px;"></div>

                        </el-col>
                    </el-card>
                </el-row>
            </el-row>
        </el-card>

    </div>
</template>

<script>
export default {
    name: "eCharts",
    data() {
        return {
        };
    },
    methods: {
        drawLine1() {
            // 基于准备好的dom，初始化echarts实例
            let myChart1 = this.$echarts.init(document.getElementById("myChart1"));
            myChart1.setOption({
                title: {
                    text: '业绩类型占比',
                    left: 'left',
                    textStyle: {

                        fontWeight: 'bolder',
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    orient: 'vertical',
                    left: 'right'
                },
                series: [
                    {
                        name: '业绩数',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        center: ["30%", "50%"],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center',

                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 30,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 20, name: '课程业绩' },
                            { value: 27, name: '商品业绩' },
                            { value: 12, name: '账户业绩' },

                        ],
                    }
                ]
            });
        },

        drawLine2() {
            // 基于准备好的dom，初始化echarts实例
            let soursepie = this.$echarts.init(document.getElementById("soursepie"));
            soursepie.setOption({
                title: {
                    text: '订单类型占比',
                    left: 'left',
                    textStyle: {

                        fontWeight: 'bolder',
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    orient: 'vertical',
                    left: 'right'
                },
                series: [
                    {
                        name: '订单数',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        center: ["30%", "50%"],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center',

                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 30,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 20, name: '新单金额' },
                            { value: 18, name: '订单金额' },
                            { value: 28, name: '续单金额' },

                        ],
                    }
                ]
            });
        },
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("myChart"));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '总业绩趋势',
                    textStyle: {
                        fontWeight: 'bolder',
                        fontSize: 14
                    }
                },

                xAxis: {
                    type: 'category',
                    data: ['三月', '四月', '五月', '六月', '七月', '八月', '本月'],
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: "人数",
                        type: "bar",
                        data: [1, 0, 0, 0, 0, 20, 130],

                    },
                ],
            });
        },
        drawLine3() {
            // 基于准备好的dom，初始化echarts实例
            let soursecolumnar = this.$echarts.init(document.getElementById("soursecolumnar"));
            // 绘制图表
            soursecolumnar.setOption({
                title: {
                    text: '课程业绩趋势',
                    textStyle: {
                        fontWeight: 'bolder',
                        fontSize: 14
                    }
                },

                xAxis: {
                    type: 'category',
                    data: ['三月', '四月', '五月', '六月', '七月', '八月', '本月'],
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: "人数",
                        type: "bar",
                        data: [1, 10, 0, 0, 30, 70, 50],

                    },
                ],
            });
        },
        drawLine4() {
            // 基于准备好的dom，初始化echarts实例
            let accountcolumnar = this.$echarts.init(document.getElementById("accountcolumnar"));
            accountcolumnar.setOption({
                title: {
                    text: '账户业绩趋势',
                    textStyle: {
                        fontWeight: 'bolder',
                        fontSize: 14
                    }
                },

                xAxis: {
                    type: 'category',
                    data: ['三月', '四月', '五月', '六月', '七月', '八月', '本月'],
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: "人数",
                        type: "bar",
                        data: [1, 0, 0, 0, 0, 60, 82],

                    },
                ],
            });
        },
        drawLine5() {
            // 基于准备好的dom，初始化echarts实例
            let accountpie = this.$echarts.init(document.getElementById("accountpie"));
            accountpie.setOption({
                title: {
                    text: '账户业绩趋势',
                    textStyle: {
                        fontWeight: 'bolder',
                        fontSize: 14
                    }
                },

                xAxis: [
                    {
                        type: 'value'
                    }
                ],
                yAxis: [
                    {
                        data: ['充值金额', '消费金额', '退费金额']
                    }
                ],
                series: [
                    {
                        name: 'Profit',
                        type: 'bar',
                        data: [200, 170, 240]
                    },

                ]
            });
        },

    },
    mounted() {
        this.drawLine()
        this.drawLine2()
        this.drawLine3()
        this.drawLine1()
        this.drawLine4()
        this.drawLine5()
    },
};
</script>



<style scoped></style>


<style scoped></style>